{% extends 'htmls/base_template.html' %}
{% load static %}

{% block top_script_section %}
    <script type="application/javascript">
        var role_map = {};

        function add_role(url, form) {
            var validation_info = {
                rules: {
                    role: {
                        required: true,
                        maxLength: 50
                    }
                },

                messages: {
                    role: {
                        required: "请输入角色名称",
                        maxLength: "角色名称不能大于50个字符"
                    }
                }
            };

            if (!validate_form_ex(form, validation_info)) {
                return;
            }

            $.ajax({
                url: url,
                async: false,
                dataType:'json',
                type: "POST",
                data: $('#'+form).serialize(),
                success: function(data, status) {},
                error: function(data) {}
            });

            window.location.href = '{{ query_role_url }}';
        }
        function show_role_dialog (update, role) {
            var role_form = $('<div class="dialog_1" id="id_dlg_add_permission">' +
                    '<div class="panel-heading">' +
                    '<h3 id="id_title" class="panel-title"></h3>' +
                    '</div>' +
                    '<form id="id_role_form" method="post">' +
                    '<div class="panel-body">' +
                    '<!-- 角色名称 -->' +
                    '<div class="form-group">' +
                    '<div class="col-sm10">' +
                    '<input id="id_role_name" type="text" class="form-control" name="role" maxlength="50" placeholder="请输入角色名称">' +
                    '</div>' +
                    '</div>' +
                    '<!-- 描述 -->' +
                    '<div class="form-group">' +
                    '<div class="col-sm10">' +
                    '<label>角色描述:</label>' +
                    '</div>' +
                    '<div class="col-sm10">' +
                    '<textarea id="id_role_desc" class="form-control" name="description">' +
                    '</textarea>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group">' +
                    '<div class="col-sm10">' +
                    '<label>请选择权限，可多选：</label>' +
                    '</div>' +
                    '<div class="col-sm10">' +
                    '<select name="permissions" id="id_permissions" multiple="multiple">' +
                    {% for p in permissions %}
                        '<option value={{ p }}>{{ p }}</option>'+
                    {% endfor%}
                    '</select>' +
                    '</div></div>' +
                    '<div class="row my_button">' +
                    '<div class="col-xs-6">' +
                    '<input class="btn btn-info btn-block" type="button" id="id_btn_add" value="提交">' +
                    '</div>' +
                    '<div class="col-xs-6">' +
                    '<input type="button" class="btn btn-info btn-block" id="id_btn_cancel" value="取消" onclick="close_modal_dialog();">' +
                    '</div></div></div></form></div>');
            show_modal_dialog(role_form);
            var perm_obj = $('#id_permissions');
            perm_obj.multiSelect();

            if (update) {
                $("#id_title").text('更改角色');
                $('#id_role_name').val(role['role']);
                $('#id_role_desc').val(role['description']);
                $('#id_btn_add').on('click', function(){
                    add_role("{{ edit_role_url }}", 'id_role_form');
                });
                perm_obj.multiSelect('select', role.permissions);
            } else {
                $('#id_title').text('添加角色');
                $('#id_btn_add').on('click', function(){
                    add_role("{{ add_role_url }}",'id_role_form');
                });
                perm_obj.multiSelect('deselect');
            }
        }

        function edit_role(obj) {
            show_role_dialog(true, role_map[obj]);
        }
{##}
{#        function add_account(update) {#}
{#            var url = "";#}
{##}
{#            if (update){#}
{#                url = "{{ edit_account_url }}";#}
{#            } else {#}
{#                url = "{{ add_account_url }}"#}
{#            }#}
{##}
{#            if (!validate_form_ex('id_account_form', {#}
{#                rules: {#}
{#                    username: {#}
{#                        required: true,#}
{#                        maxLength: 50#}
{#                    },#}
{##}
{#                    email: {#}
{#                        required: true#}
{#                    },#}
{##}
{#                    password: {#}
{#                        minLength: 6,#}
{#                        maxLength:255#}
{#                    },#}
{##}
{#                    password_confirm: {#}
{#                        equalTo: $('input[name="password"]')#}
{#                    },#}
{#                    role: {#}
{#                        required:true#}
{#                    }#}
{#                },#}
{#                messages: {#}
{#                    username: {#}
{#                        required: "请输入用户名",#}
{#                        maxLength: "用户名长度不能大于50个字符"#}
{#                    },#}
{#                    password: {#}
{#                        minLength: "密码长度不能小于6个字符",#}
{#                        maxLength: "密码长度不能大于255个字符"#}
{#                    },#}
{#                    email: {#}
{#                        required: "请输入邮件地址"#}
{#                    },#}
{#                    password_confirm: {#}
{#                        equalTo: "密码前后不一致"#}
{#                    },#}
{#                    role: {#}
{#                        required: "请选择要创建的角色"#}
{#                    }#}
{#                }#}
{#            })) {#}
{#                return;#}
{#            }#}
{##}
{#            $.ajax({#}
{#                type: 'POST',#}
{#                dataType: "json",#}
{#                data: $('#id_account_form').serialize(),#}
{#                url: url,#}
{#                async: false,#}
{#                success: function (data, status) {},#}
{#                error: function() {}#}
{#            });#}
{##}
{#            window.location.href="{{ query_accounts_url }}";#}
{#        }#}
{##}
{#        function show_account_dialog(update, data) {#}
{#            var dlg_account = '<div class="dialog_1" id="id_dlg_add_account"> <div class="panel-heading"> <h3 id="id_title" class="panel-title"></h3> </div> <form id="id_account_form" method="post" action="{{ add_account_url }}"> <div class="panel-body"> <!-- 用户名 --> <div class="form-group"> <div class="col-sm10"> <input type="text" class="form-control" name="username" maxlength="50" placeholder="用户名"> </div> </div> <!-- 邮件 --> <div class="form-group"> <div class="col-sm10"> <input type="email" class="form-control" name="email" maxlength="50" placeholder="邮件"> </div> </div> <!-- 密码 --> <div class="form-group"> <div class="col-sm10"> <input type="password" class="form-control" name="password" maxlength="50" placeholder="密码"> </div> </div> <!-- 确认密码 --> <div class="form-group"> <div class="col_sm10"> <input type="password" class="form-control" name="password_confirm" maxlength="50" placeholder="确认密码"> </div> </div><!-- 角色 --> <div class="form-group"> <div class="col_sm10"> <select name="role" class="form-control"> <option value="">--请选择角色--</option> {% for t in roles %} <option value="{{ t }}">{{ t }}</option> {% endfor %} </select> </div> </div><div class="row my_button"> <div class="col-xs-6"> <input class="btn btn-info btn-block" type="button" id="id_btn_add" value=""> </div> <div class="col-xs-6"> <input type="button" class="btn btn-info btn-block" id="id_btn_cancel" value="取消" onclick="close_modal_dialog();"> </div> </div> </div> </form> </div>';#}
{#            var acct_obj = $(dlg_account);#}
{##}
{#            show_modal_dialog(acct_obj);#}
{#            if (update) {#}
{#                $('#id_title').text("更改账户");#}
{#                $("input[name='username']").val(data['username']);#}
{#                $("input[name='email']").val(data['email']);#}
{#                $("select").val(data['role']);#}
{#                $("select").find("option[value="+data['role']+"]").attr("selected",true);#}
{#                $('#id_btn_add').on('click', function (){add_account(true);});#}
{#                $('#id_btn_add').val("更改");#}
{#            } else {#}
{#                $('#id_title').text('添加账户');#}
{#                $('#id_btn_add').on('click', function(){add_account(false)});#}
{#                $('#id_btn_add').val('添加');#}
{#            }#}
{#        }#}
{##}
{#        function edit_account(id) {#}
{#            var data = account_list[id];#}
{##}
{#            show_account_dialog(true, data);#}
{#        }#}
{##}
{#        $(document).ready(function () {#}
{#            $('#id_btnAdd').on("click", function () {#}
{#                show_account_dialog(false);#}
{#            });#}
{#            $('#id_btn_cancel').on("click", function () {#}
{#                close_modal_dialog();#}
{#            });#}
{#        });#}
    </script>
{% endblock %}

{% block body_section %}
{% endblock %}
{% block content_section %}
    <div class="panel panel-default" xmlns="http://www.w3.org/1999/html">
        <div class="panel-heading">
            <h3 class="panel-title">账户列表</h3>
        </div>
        <div>
            {% if "添加角色" in perms %}
                <input type="button" id="id_btnAdd" value="添加" onclick="show_role_dialog(false);">
            {% endif %}

            {% if "删除角色" in perms %}
                <input type="button" value="删除" onclick="delete_multiple_objects();">
            {% endif %}
        </div>
        <div class="panel-body">
            <script type="text/javascript">
                jQuery(document).ready(function ($) {
                    $("#example-2").dataTable({
                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                        aLengthMenu: [
                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                        ],
                        bProcessing: true,
                        bPaginate: true,
                        fnDraw: false,
                        bLengthChange: true,
                        bStateSave: false,
                        bServerSide: true,
                        sServerMethod: "POST",
                        sAjaxSource: "{{ query_role_url }}",
                        fnServerParams: function (aoData) {
                        },
                        columns: [
                            {
                                "data": "role",
                                bSortable: false, "render": function (obj, type, full) {
                                role_map[obj] = full;
                                return '<input type="checkbox" class="cbr" onchange="select_multiple_objects(this, \'role\',\'' + obj + '\');">';
                            }
                            },

                            {"data": "role"},
                            {"data": "description"},
                            {"data": "create_time"},
                            {"data": "permissions", "render": function(obj, type, full){
                                if (full['is_superuser']) {
                                    return '<a>超级用户</a>'
                                } else {
                                    return obj;
                                }
                            }},
                            {
                                "data": "role",
                                "render": function (obj, type, full) {
                                    return '<a onclick="edit_role(\''+obj+'\');" class="btn btn-secondary btn-sm btn-icon">编辑</a>';
                                }
                            }
                        ],
                        language: {
                            "sProcessing": "处理中...",
                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                            "sZeroRecords": "没有匹配结果",
                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                            "sInfoPostFix": "",
                            "sSearch": "模糊搜索:",
                            "sUrl": "",
                            "sEmptyTable": "表中数据为空",
                            "sLoadingRecords": "载入中...",
                            "sProcessing": "<img src='{% static 'assets/images/loding.gif'%}'/> 正在加载数据...",
                            "sInfoThousands": ",",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上页",
                                "sNext": "下页",
                                "sLast": "末页"
                            }
                        },
                    });
                });
            </script>
            <table class="table table-bordered table-striped" id="example-2"
                   name="id_data_table">
                <thead>
                <tr>
                    <th></th>
                    <th>角色名</th>
                    <th>描述</th>
                    <th>创建日期</th>
                    <th>权限</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="middle-align">
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}